<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:a4j="http://richfaces.org/a4j"
  xmlns:zanata="http://java.sun.com/jsf/composite/zanata"
  template="/WEB-INF/template/template_nobanner.xhtml">

  <f:metadata>
    <f:event type="preRenderView" listener="#{register.redirectIfLoggedIn()}"/>
    <f:event type="preRenderView" listener="#{register.checkRegistrationAvailability()}"/>
  </f:metadata>

  <ui:define name="page_title">#{msgs['jsf.Register']}</ui:define>
  <ui:define name="center_content">

    <script type="application/javascript">
      jQuery(document).ready(function () {
        var nameFieldId = "[id='#{rich:clientId('nameField')}']";
        jQuery(nameFieldId).find('input').focus()
      })
    </script>

    <div class="header__logo-only">
      <h:link outcome="/public/home.xhtml" id="home" tabindex="1">
        <img src="#{request.contextPath}/resources/assets/img/logo/logo.svg" alt="Zanata"/>
      </h:link>
    </div>

    <div class="g--centered">
      <div
        class="g__item #{applicationConfiguration.multiAuth ? 'l--constrain-medium l--constrain-small-m' : 'l--constrain-small'}">
        <div class="l--push-v-2">
          <a4j:outputPanel ajaxRendered="true" layout="block" id="messages">
            <h:messages globalOnly="true"
              styleClass="list--no-bullets"
              errorClass="message--danger app-error l--push-bottom-half"
              infoClass="message--highlight l--push-bottom-half"
              warnClass="message--warning l--push-bottom-half"
              rendered="#{showGlobalMessages != 'false'}"/>
          </a4j:outputPanel>
          <div class="g">
            <h:panelGroup layout="block"
              styleClass="l--push-top-half g__item #{applicationConfiguration.multiAuth ? 'w--1-2 w--1-m' : ''}"
              rendered="#{applicationConfiguration.internalAuth or applicationConfiguration.jaasAuth}">
              <ui:fragment rendered="#{applicationConfiguration.multiAuth}">
                <h2
                  class="gamma heading--sub">#{msgs['jsf.register.WithZanata']}</h2>
              </ui:fragment>

              <h:form id="loginForm"
                styleClass="l--push-top-half l--pad-all-1 bg--pop-higher js-form-password-parent">
                <h:outputLabel
                  for="name">#{msgs['jsf.register.FullName.label']}</h:outputLabel>
                <zanata:decorate id="name" componentId="nameField">
                  <h:inputText id="name" value="#{register.person.name}"
                    tabindex="2"/>
                </zanata:decorate>


                <h:outputLabel
                  for="username">#{msgs['jsf.Username']}</h:outputLabel>
                <zanata:decorate id="username" componentId="usernameField">
                  <h:inputText id="username" value="#{register.username}"
                    tabindex="3">
                    <a4j:ajax event="blur" render="usernameField" execute="@this" limitRender="true" />
                  </h:inputText>
                </zanata:decorate>


                <h:outputLabel
                  for="email">#{msgs['jsf.Email']}</h:outputLabel>
                <zanata:decorate id="email" componentId="emailField">
                  <h:inputText id="email" value="#{register.email}"
                    tabindex="4">
                    <a4j:ajax event="blur" render="emailField" execute="@this" limitRender="true"/>
                  </h:inputText>
                </zanata:decorate>

                <h:outputLabel
                  for="password">#{msgs['jsf.Password']}</h:outputLabel>
                <zanata:decorate id="passwordField">
                  <div class="form__password js-form-password">
                    <h:inputSecret id="password" redisplay="true"
                      styleClass="js-form-password-input form__input"
                      value="#{register.password}"
                      tabindex="5">
                    </h:inputSecret>
                    <a href="#"
                      class="form__toggle js-form-password-toggle">Show</a>
                  </div>
                </zanata:decorate>

                <h:outputLabel for="human"
                  styleClass="is-hidden">If you are a human, do not fill in this field.</h:outputLabel>
                <h:inputText id="human" styleClass="is-hidden"
                  value="#{register.humanField}"/>

                <p class="txt--meta l--push-top-half" id="termsOfUseUrl">
                  <h:outputText value="#{msgs.format('jsf.register.agreeToTOS',
                    applicationConfigurationAction.termOfUseUrl)}" escape="false"/>
                </p>

                <div class="l--push-top-1">
                  <h:commandButton value="#{msgs['jsf.Signup']}" action="#{register.register}"
                    styleClass="button--primary button--full"/>

                  <div
                    class="l--push-top-half txt--align-center txt--align-center-s">
                    #{msgs['jsf.register.AlreadyHaveAccount.label']} <h:link
                    outcome="/account/login.xhtml"
                    value="#{msgs['jsf.register.LogIn.label']}"/>
                  </div>
                </div>
              </h:form>
            </h:panelGroup>
            <h:panelGroup layout="block"
              styleClass="l--push-top-half g__item #{applicationConfiguration.multiAuth ? 'w--1-2 w--1-m' : ''}"
              rendered="#{applicationConfiguration.openIdAuth}">
              <h:form>
                <ui:fragment rendered="#{applicationConfiguration.multiAuth}">
                  <h2
                    class="gamma heading--sub">#{msgs['jsf.register.WithOther.label']}</h2>
                </ui:fragment>
                <ul class="list--no-bullets">
                  <li class="l--push-top-half">
                    <h:commandLink action="#{loginAction.openIdLogin('Fedora')}"
                      styleClass="button--full button--fedora" value="Fedora"/>
                  </li>
                  <li class="l--push-top-half">
                    <h:commandLink action="#{loginAction.openIdLogin('Yahoo')}"
                      styleClass="button--full button--yahoo" value="Yahoo"/>
                  </li>
                  <li
                    class="l--push-top-half l--pad-top-half l--pad-h-half bg--pop-higher">
                    <label for="openid">Open ID</label>

                    <div class="g--tighter">
                      <div class="g__item w--3-4 w--3-4-s">
                        <h:inputText id="openid" value="#{loginAction.openId}"/>
                      </div>
                      <div class="g__item w--1-4 w--1-4-s">
                        <h:commandButton
                          action="#{loginAction.openIdLogin('Generic')}"
                          styleClass="button--full" value="Go"/>
                      </div>
                    </div>
                  </li>
                </ul>
              </h:form>
            </h:panelGroup>
          </div>
        </div>
      </div>
    </div>
  </ui:define>
</ui:composition>
